<template>
  <el-dialog
    title="移动分组"
    :visible.sync="$attrs.visable"
    width="520px"
    :before-close="handleClose"
  >
    <el-form :model="form" :rules="rules" ref="form" label-width="0">
      <el-form-item label="" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">移动至新分组(原分组移出)</el-radio>
          <el-radio :label="2">添加至新分组(原分组保留)</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="" prop="groupId">
        <el-select v-model="form.groupId" placeholder="请选择分组" class="w_full">
          <el-option v-for="(item,index) in groupList" :key="index" :label="item.groupName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { updateAccountGroup, listGroup  } from '@/api/system/tgwechat'
export default {
  data() {
    return {
      groupList: [
        // {label:'分组一',id:1,num:1, checked:true, children:[{ label:'分组1-1', id:2, num:0, checked:false}]},
        // {label:'分组二',id:3,num:0, checked:false }
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {
        type:1,
        groupId:''
      },
      rules: {
        groupId: [{ required: true, message: "请选择分组", trigger: "blur" }],
      },
    };
  },
  props:{
    row:{
      type:Object,
      default:null
    }
  },
  created(){
    this.getGroupList()
  },
  methods: {

    getGroupList(){
      listGroup().then(res=>{
        this.groupList = res.data
      })
    },

    handleClose() {
      this.$emit('update:visable',false)
      // this.$emit("close"); //关闭弹窗;
    },

    handleNodeClick(data){
    //   console.log('data:',data)
      this.changeData(this.groupList)
      data.checked = true
    },

    changeData(data){
       data.forEach(item => {
        item.checked = false
        if(item.children && item.children.length)
        this.changeData(item.children)
       });
    },

    handleSubmit(){
      this.$refs.form.validate(valid=>{
        if(!valid) return
        updateAccountGroup(this.form).then(res=>{
          this.$message.success('修改成功')
          this.$emit('success')
          this.handleClose()
        })
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-node{
  border-radius: 4px;
  &.active{
    background-color: #ebf2ff;
  }
}
</style>